<template>
  <div class="components-container">
    <div v-if="spot.id" :key="spot.id">
      <div class="video-box"><video class="video-item" :src="videoSrc" v-if="videoSrc" controls></video></div>
      <tinymce id="mian-tinyMCE" v-model="content"/>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/tinymce-editor'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default {
  name: 'TinymceDemo',
  components: {Tinymce},
  data () {
    return {
      spot: {},
      content: '',
      videoSrc: ''
    }
  },
  mounted () {
    PubSub.subscribe('SELECTED-SPOT', (event, data) => {
      this.spot = data
      console.log(this.spot)
      let videoPath = this.spot.videoPath
      let encodeContent = this.spot.content
      this.setContent(encodeContent)
      this.setVideoSrc(videoPath)
    })

    PubSub.subscribe('VIDEO-ID', (event, data) => {
      this.setVideoSrc(data)
    })

    PubSub.subscribe('SAVE-CONTENT', (event, data) => {
      this.saveContent()
    })
    PubSub.subscribe('REMOVE-VIDEO', (event, data) => {
      this.videoSrc = ''
    })
  },
  methods: {
    setVideoSrc (videoPath) {
      if (!videoPath) {
        this.videoSrc = ''
        return
      }
      this.videoSrc = './api/attachment/' + videoPath
    },
    setContent (content) {
      console.log('设置内容', content)
      if (!content) {
        this.content = ''
        return
      }
      this.content = content
    },
    saveContent () {
      let url = `/api/spot/saveContent/${this.spot.id}`
      // let encodeContent = encodeURIComponent(this.content)
      axios.post(url, this.content, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.$message.success('保存成功')
        PubSub.publish('REFRESH-SPOT', false)
      }, res => {
        console.log(res.error)
      })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .components-container
    height: 100%
    width 100%
    background #f2f2f2
  .video-box
    width 100%
    text-align center
    .video-item
      max-height 600px
      max-width 800px
  .editor-content
    margin-top: 20px

</style>
